import { useSelector, useDispatch } from "react-redux"
function Dian() {
    const state = useSelector((a) => a.listArr)
    const shopArr = useSelector((a) => a.shopArr)

    const dispatch = useDispatch()
    function changeNum(id, type) {
        dispatch({ type: "NUM", id, lei: type })
    }
    return (
        <div>
            {
                state.map(item => {
                    return (
                        <div key={item.id}
                            style={{
                                width: "100vw", display: "flex", justifyContent: "space-evenly", alignItems: "center", height: "7vh"
                            }}
                        >
                            <p><label>名称:</label>{item.name}</p>
                            <p><label>价格:</label>{item.price}</p>
                            <div>
                                <button onClick={() => changeNum(item.id, false)}>-</button>
                                <span>{item.num}</span>
                                <button onClick={() => changeNum(item.id, true)}>+</button>
                            </div>
                        </div>
                    )
                })
            }
            <button>商品({shopArr.length})</button>
        </div>
    )
}
export default Dian